<script lang="ts" setup>
import { reactive, ref } from 'vue'
import api from '/@/api/email/index';
import { type FormInstance, type FormRules } from 'element-plus'
import OneIcon from '/@/components/Common/OneIcon.vue'

defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
})
const emit = defineEmits(['update:modelValue', 'refresh'])
const ruleFormRef = ref<FormInstance>()
interface RuleForm {
    id: number | undefined
    uid: string
    usdAmount: number | undefined
    canUsdAmount: number | undefined
    type: number
    typeDisplay: string
    serviceCharge: number
    pi: string
    payAttribute: number
    voucherUrl: string
    voucherDtlList: any[]
}
const ruleForm = reactive<RuleForm>({
    id: undefined,
    uid: '',
    usdAmount: undefined,
    canUsdAmount: undefined,
    type: 1,
    typeDisplay: '',
    serviceCharge: 0,
    pi: '',
    payAttribute: 1,
    voucherUrl: '',
    voucherDtlList: []
})
const rules = reactive<FormRules<RuleForm>>({
})
function add() {
    ruleForm.voucherDtlList.push({
        pi: '',
        payAttribute: 1,
        usdAmount: 0,
    })
}
function remove(key: number) {
    ruleForm.voucherDtlList.splice(key, 1)
}
const remoteLoading = ref(false)
const piData = ref<{
    pi: string
}[]>([])
async function remoteMethod(query: any, init = false) {
    if (query || init) {
        remoteLoading.value = true
        try {
            const { data } = await api.pi.piList({
                excludeGp: 0,
                withPi: 1,
                pi: query,
            })
            piData.value = data
            remoteLoading.value = false
        }
        catch (error) {
            console.error(error)
            remoteLoading.value = false
        }
    }
    else {
        piData.value = []
    }
}
const getInfo = async (id: number) => {
    try {
        const { data } = await api.voucher.info(id)
        console.log('详情数据', data)
        data.voucherDtlList = [{
            pi: '',
            payAttribute: 1,
            usdAmount: 0,
        }]
        Object.assign(ruleForm, data)
    } catch (error) {
        console.log(error)
    }
}
const submit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            const { id, voucherDtlList } = ruleForm
            const { code } = await api.voucher.claim({
                id,
                voucherDtlList,
            })
            if (code === 200) {
                ElMessage.success('认领成功')
                emit('refresh')
                close()
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}
const close = () => {
    ruleFormRef.value?.resetFields()
    emit('update:modelValue', false)
}

defineExpose({
    getInfo,
    ruleForm
})
</script>
<template>
    <TwoDialog id="voucherClaim" :modelValue="modelValue" title="认领" width="520px" @submit="submit(ruleFormRef)"
        @close="close" @minimize="emit('update:modelValue', false)">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto">
            <el-row :gutter="16">
                <el-col :span="24">
                    <el-form-item label="总金额[美元]" prop="usdAmount">
                        {{ ruleForm.usdAmount }}
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="待认领金额[美元]" prop="canUsdAmount">
                        {{ ruleForm.canUsdAmount }}
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="金额[人民币]" prop="payType">
                        <span>汇率还未上传，暂不展示人民币金额</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="付款方式" prop="typeDisplay">
                        {{ ruleForm.typeDisplay }}
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="付款凭证" prop="paymentType">
                        <el-space v-if="ruleForm.voucherUrl">
                            <el-image v-for="(item, index) in ruleForm.voucherUrl.split(',')" :key="index" :src="item"
                                fit="cover" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :initial-index="index"
                                :preview-src-list="ruleForm.voucherUrl.split(',')" preview-teleported
                                style="width: 110px; height: 60px;" />
                        </el-space>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="" prop="accountName">
                        <div v-for="(form, key) in ruleForm.voucherDtlList" :key="key" class="module">
                            <el-form-item label="PI" prop="pi">
                                <el-space>
                                    <el-select
                                        v-model="form.pi"
                                        placeholder="输入PI号搜索"
                                        filterable
                                        remote
                                        :remote-method="remoteMethod"
                                        :loading="remoteLoading"
                                        clearable
                                    >
                                        <el-option v-for="item in piData" :key="item.pi" :label="item.pi" :value="item.pi" />
                                    </el-select>
                                    <el-button v-if="key === 0" circle @click="add">
                                        <OneIcon name="ep:plus" />
                                    </el-button>
                                    <el-button v-else circle @click="remove(key)">
                                        <OneIcon name="ep:minus" />
                                    </el-button>
                                </el-space>
                            </el-form-item>
                            <el-form-item label="类型" prop="payAttribute">
                                <el-radio-group v-model="form.payAttribute">
                                    <el-radio label="全款" :value="1" />
                                    <el-radio label="定金" :value="2" />
                                    <el-radio label="尾款" :value="3" />
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="本次认领金额[美元]" prop="usdAmount">
                                <el-input-number v-model="form.usdAmount" :min="0" :controls="false" />
                            </el-form-item>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </TwoDialog>
</template>
<style lang="scss" scoped>
.cascader-panel {
    width: fit-content;
}
.module {
    width: 100%;
    border: 1px solid #dcdfe6;
    padding: 18px;
    & + .module {
        margin-top: 18px;
    }
}
.el-form-item .el-form-item {
    margin-bottom: 18px;
}
</style>